<template>
  <div>


<div class="box">
  <el-menu  class="el-menu-demo" mode="horizontal" router >
  <el-menu-item index="/one">未读信息{{num1}}</el-menu-item>
   <el-menu-item index="/two">已读信息{{num2}}</el-menu-item>
    <el-menu-item index="/three">回收站{{num3}}</el-menu-item>
</el-menu>
<router-view></router-view>
</div>


  </div>
</template>

<script>
export default {
  data () {
    return {
     
    }
  },
  computed:{
    num1(){
      var num1=0
      num1=this.$store.state.res.filter(item=>{
        return item.num==0
      }).length
      return num1
    },
      num2(){
      var num2=0
      num2=this.$store.state.res.filter(item=>{
        return item.num==1
      }).length
      return num2
    },
      num3(){
      var num3=0
      num3=this.$store.state.res.filter(item=>{
        return item.num==2
      }).length
      return num3
    }
  },
  methods: {

  }
}
</script>

<style lang='scss'>
.box{
  width: 1000px;
  height: 500px;
  border: 1px solid black;
  margin: 100px auto;
}
</style>
